<template>
  <div :class="debug ? 'pageBak': ''" :style="debug ? 'margin: 10px': ''">
    <!-- <el-button v-if="debug" type="danger" class="el-icon-close" style="padding: 0;" @click="deletePage"></el-button> -->
    <component :is="componentName" :from-id="fromId" :pid="pid" :debug="debug" :component-name="componentName" :root-id="rootId" @buildInDialog="buildInDialog"></component>
  </div>
</template>

<script>
import query from '@/views/auto-page/components/query'

export default {

name: 'PageComponents',
  // components: { tableIndex, query, test },
  components: { query },
  props: {
    componentName: { // 是否处于调试状态
      type: String,
      default: ''
    },
    fromId: {
      type: Number,
      default: 0
    },
    rootId: {
      type: Number,
      default: 0
    },
    debug: {
      type: Boolean,
      default: false
    },
    pid: {
      type: Number,
      default: 0
    }
  },

  created() {
    this.pageId = this.$route.meta.pageId
  },

  methods: {
    deletePage: function() {
      this.$emit('deletePage', this.fromId);
    },
    buildInDialog(operation, row) {
      this.$emit('buildInDialog', operation, row)
    }
  }
}
</script>

<style scoped>
.pageBak {
  border: 1px solid #DCDFE6;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}
</style>
